<template>
    <div>
        姓名<input type="text" v-model="state.uname">
        出生日期<input type="date" v-model="state.sdate">-<input type="date" v-model="state.edate">
        <input type="button" value="查询"  class="btn btn-success"  @click="getlist">
        <table class="table table-bordered">
            <tr>
                <td>姓名</td>
                <td>手机号</td>
                <td>身份证</td>
                <td>出生日期</td>
                <td>头像</td>
                <td>积分</td>
                <td>余额</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.mname }}</td>
                <td>{{ item.phone }}</td>
                <td>{{item.idcard}}</td>
                <td>{{item.birthday.substr(0,10)}}</td>
                <td>
                   <img :src="item.faceimages" alt="" width="100" height="100">
                </td>
                <td>{{item.total}}</td>
                <td>{{item.totalPrice}}</td>
                <td>{{ item.states==1?"开启":"禁用" }}</td>
                <td>
                    <input type="button" value="修改" @click="updatecon(item.id)">
                    <input type="button" value="注销" @click="zxupda(item.id,item.states)">
                </td>
            </tr>
        </table>
    </div>
  </template>
  
  <script setup lang="ts">
    //reactive实现响应式数据的方式
  import {onMounted, reactive, toRefs} from 'vue'
  import {useRoute, useRouter} from 'vue-router'
  import axios from 'axios'
//页面跳转并且传参
  const router=useRouter();
  //route路由器对象 接收参数
  const route=useRoute()

  let data:any=reactive({
    state:{
        uname:'',
        sdate:'',
        edate:'',
    },
    list:[]
  })
  let{state,list} =toRefs(data)

  onMounted(()=>{
    getlist()
  })

  const getlist=()=>{
    let obj={
        uname:state.value.uname,
        sdate:state.value.sdate,
        edate:state.value.edate
    }
    axios({
        url:'/api/Member/GetMembers',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data;
    })
    .catch(err=>{
        console.log(err)
    })
  }
//修改
const updatecon=(id:any)=>{
router.push({
    path:'/mmemberupd',
    query:{
        id:id
    }
})
  }
//注销
  const zxupda=(id:any,states:any)=>{
    if(states==1){
        states=0;
    }else{
        states=1;
    }
    let obj={
        id:id,
        states:states
    }
    console.log(obj)
    axios({
        url:'/api/Member/Updstates',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1){
            alert("修改状态成功")
            getlist()
        }else{
            alert("修改状态失败")
        }
    })
    .catch(err=>{
        console.log(err)
    })
  }
  </script>
  
  <style scoped>
  
  </style>